<template>
	<div>
		<div class="top">
			<i class="el-icon-arrow-left"></i>
			<span style="color:#999999;font-size: 14px;margin: 0 20px 0 10px;" @click="fanhui">返回</span>
			<span style="font-weight: 600;" >新建舆情分析</span>
		</div>
		<div class="main">
			
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
			  <el-form-item label="分析方案名称" prop="name">
			    <el-input v-model="ruleForm.name" placeholder="请输入分析方案名称"></el-input>
			  </el-form-item>
			  <el-form-item label="监测地域" >
				<el-cascader
					size="small"
					:options="address"
					v-model="ruleForm.selectedOptions"
					@change="handleChange" style="width: 140px;" >
				</el-cascader>
			  </el-form-item>
			 
			  <el-form-item label="主分析词" prop="desc" placeholder="请输入主词分析">
			    <el-input type="textarea" v-model="ruleForm.desc"></el-input>
			  </el-form-item>
			  <el-form-item label="搭配词" prop="esc" placeholder="请输入搭配词">
			    <el-input type="textarea" v-model="ruleForm.esc"></el-input>
			  </el-form-item>
			  <el-form-item>
			    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
			    <el-button @click="resetForm('ruleForm')">取消</el-button>
			  </el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	import { regionDataPlus } from 'element-china-area-data'


  export default {
    data() {
      return {
        ruleForm: {
          name: '',
          desc: '',
		  esc:'',
		  selectedOptions: [],
        },
		address: [],
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写主分析词', trigger: 'blur' }
          ],
		  esc: [
		    { required: true, message: '请填写搭配词', trigger: 'blur' }
		  ]
        }
      };
    },
	mounted(){
		this.address = regionDataPlus
	},
    methods: {
      submitForm(formName) {
		  this.$confirm('是否新建舆情分析任务?', '提示', {
		            confirmButtonText: '确定',
		            cancelButtonText: '取消',
		            type: 'warning'
		          }).then(() => {
					  this.$refs[formName].validate((valid) => {
					    if (valid) {
					     this.$message({
					       type: 'success',
					       message: '添加成功!'
					     });
						 this.$router.push("/yuqingfenxi/yuqingfenxi")
					    } else {
					      this.$message({
					        type: 'info',
					        message: '添加失败'
					      });    
					    }
					  });
		           
		          }).catch(() => {
		            this.$message({
		              type: 'info',
		              message: '取消添加'
		            });          
					// this.$router.push("/yuqingfenxi/yuqingfenxi")
		          });
		  
        
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
	  fanhui(){
		  this.$router.push("/yuqingfenxi/yuqingfenxi")
	  },
	   handleChange() {
	        
	    }
    }
  }
</script>


<style lang="scss" scoped>
	.flex{
		display:flex;
	}
	.top{
		padding:24px;
		background-color: #fff;
	}
	.main{
		padding: 20px;
		width: 600px;
	}
</style>